.gif){kind=spacer}
commercial led display advertising: trending now.png)
Your GitHub launch code.png)
You've successfully connected with your child's class. Say hi to Ms. Brabham and see how ClassDojo can help you support Jada-..png)
.png)
Duval Thompson reacted via Gmail On Mon, Jul 21, 2025 at 8:41 AM <noreply@finance.nyc.gov> wrote: Thank you for your payment. Payment Amount: $68.00 Receipt Number: CPY047423857 Transaction.
(no subject)
Important mainly because it was sent directly to you.
Click to teach Gmail this conversation is not important.
Click to teach Gmail this conversation is not important.
Inbox
| 3:00 PM (3 hours ago)  | | ||
| ||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Mania Quiz</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap " rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
touch-action: manipulation;
}
.card {
background-color: white;
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.btn {
transition: all 0.2s ease-in-out;
transform: scale(1);
}
.btn:hover {
transform: scale(1.05);
}
.btn:active {
transform: scale(0.98);
}
.btn-correct {
background-color: #22c55e !important; /* green-500 */
color: white !important;
border-color: #16a34a !important;
}
.btn-incorrect {
background-color: #ef4444 !important; /* red-500 */
color: white !important;
border-color: #dc2626 !important;
}
.logo-container {
height: 120px;
width: 120px;
}
.logo-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
<div id="game-container" class="w-full max-w-2xl mx-auto">
<!-- Start Screen -->
<div id="start-screen" class="text-center">
<div class="card">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Car Mania Quiz</h1>
<p class="text-gray-600 text-lg mb-8">Choose a game mode to test your car knowledge!</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button id="start-logo-quiz" class="btn w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
Match the Logo
</button>
<button id="start-model-quiz" class="btn w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
Match the Model
</button>
<button id="start-part-quiz" class="btn w-full md:col-span-2 bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">
Match the Part
</button>
</div>
<div class="mt-6">
<button id="edit-cars-btn" class="btn w-full md:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-5 rounded-lg text-md shadow-lg">
Edit Car List
</button>
<button id="edit-parts-btn" class="btn w-full md:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-5 rounded-lg text-md shadow-lg mt-2 md:mt-0 md:ml-2">
Edit Part List
</button>
</div>
</div>
</div>
<!-- Game Screen -->
<div id="game-screen" class="hidden">
<div class="card">
<div class="flex justify-between items-center mb-6">
<h2 id="quiz-title" class="text-2xl font-bold text-gray-800"></h2>
<div class="text-lg font-semibold text-gray-700">
Score: <span id="score">0</span>
</div>
</div>
<div id="question-container" class="text-center mb-8">
<!-- Logo Quiz Content -->
<div id="logo-question-content" class="hidden flex flex-col items-center">
<p class="text-xl text-gray-600 mb-4">Which car brand is this?</p>
<div id="logo-display" class="logo-container mx-auto mb-6 flex items-center justify-center"></div>
</div>
<!-- Model Quiz Content -->
<div id="model-question-content" class="hidden flex flex-col items-center">
<p class="text-xl text-gray-600 mb-2">Which manufacturer makes the</p>
<h3 id="model-name" class="text-4xl font-bold text-blue-600"></h3>
</div>
<!-- Part Quiz Content -->
<div id="part-question-content" class="hidden flex flex-col items-center">
<p class="text-xl text-gray-600 mb-4">What is this car part?</p>
<div id="part-display" class="logo-container mx-auto mb-6 flex items-center justify-center"></div>
</div>
</div>
<div id="answers-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Answer buttons will be injected here -->
</div>
<div id="feedback-container" class="mt-6 text-center h-8">
<p id="feedback-message" class="text-xl font-semibold"></p>
</div>
</div>
</div>
<!-- End Screen -->
<div id="end-screen" class="hidden">
<div class="card text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Game Over!</h2>
<p class="text-2xl text-gray-600 mb-2">Your final score is:</p>
<p id="final-score" class="text-6xl font-extrabold text-blue-600 mb-8"></p>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<button id="play-again" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Play Again</button>
</div>
</div>
</div>
<!-- Edit Screen -->
<div id="edit-screen" class="hidden">
<div class="card">
<h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Edit Car List</h2>
<div id="car-list-container" class="space-y-4 mb-6 max-h-96 overflow-y-auto p-2 bg-gray-50 rounded-lg">
<!-- Car list will be rendered here -->
</div>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<button id="add-new-car-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Add New Car</button>
<button id="back-to-menu-btn" class="btn bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Back to Menu</button>
</div>
</div>
</div>
<!-- Edit Parts Screen -->
<div id="edit-parts-screen" class="hidden">
<div class="card">
<h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Edit Part List</h2>
<div id="part-list-container" class="space-y-4 mb-6 max-h-96 overflow-y-auto p-2 bg-gray-50 rounded-lg">
<!-- Part list will be rendered here -->
</div>
<div class="flex flex-col md:flex-row gap-4 justify-center">
<button id="add-new-part-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Add New Part</button>
<button id="back-to-menu-from-parts-btn" class="btn bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-lg">Back to Menu</button>
</div>
</div>
</div>
</div>
<!-- Add/Edit Car Modal -->
<div id="edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div class="card w-full max-w-lg">
<h3 id="modal-title" class="text-2xl font-bold text-gray-800 mb-4">Add New Car</h3>
<p id="modal-error" class="text-red-500 text-sm mb-2 hidden"></p>
<form id="edit-form">
<div class="mb-4">
<label for="brand-name-input" class="block text-gray-700 font-semibold mb-2">Brand Name</label>
<input type="text" id="brand-name-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
</div>
<div class="mb-4">
<label for="logo-url-input" class="block text-gray-700 font-semibold mb-2">Logo Image URL</label>
<input type="text" id="logo-url-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm" required>
</div>
<div class="mb-4">
<label for="models-input" class="block text-gray-700 font-semibold mb-2">Models (comma-separated)</label>
<input type="text" id="models-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="e.g. Model A, Model B, Model C" required>
</div>
<div class="flex justify-end gap-4">
<button type="button" id="cancel-edit-btn" class="btn bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">Cancel</button>
<button type="submit" id="save-edit-btn" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
</div>
</form>
</div>
</div>
<!-- Add/Edit Part Modal -->
<div id="edit-part-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div class="card w-full max-w-lg">
<h3 id="part-modal-title" class="text-2xl font-bold text-gray-800 mb-4">Add New Part</h3>
<p id="part-modal-error" class="text-red-500 text-sm mb-2 hidden"></p>
<form id="edit-part-form">
<div class="mb-4">
<label for="part-name-input" class="block text-gray-700 font-semibold mb-2">Part Name</label>
<input type="text" id="part-name-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
</div>
<div class="mb-4">
<label for="part-image-url-input" class="block text-gray-700 font-semibold mb-2">Image URL</label>
<input type="text" id="part-image-url-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm" required>
</div>
<div class="flex justify-end gap-4">
<button type="button" id="cancel-part-edit-btn" class="btn bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">Cancel</button>
<button type="submit" id="save-part-edit-btn" class="btn bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
</div>
</form>
</div>
</div>
<script>
// DOM Elements
const startScreen = document.getElementById('start-screen' );
const gameScreen = document.getElementById('game-screen' );
const endScreen = document.getElementById('end-screen' );
const startLogoQuizBtn = document.getElementById('start-logo-quiz' );
const startModelQuizBtn = document.getElementById('start-model-quiz' );
const startPartQuizBtn = document.getElementById('start-part-quiz' );
const playAgainBtn = document.getElementById('play-again' );
const quizTitle = document.getElementById('quiz-title' );
const scoreDisplay = document.getElementById('score' );
const questionContainer = document.getElementById('question-container' );
const logoQuestionContent = document.getElementById('logo-question-content' );
const modelQuestionContent = document.getElementById('model-question-content' );
const partQuestionContent = document.getElementById('part-question-content' );
const logoDisplay = document.getElementById('logo-display' );
const modelNameDisplay = document.getElementById('model-name' );
const partDisplay = document.getElementById('part-display' );
const answersContainer = document.getElementById('answers-container' );
const finalScoreDisplay = document.getElementById('final-score' );
const feedbackMessage = document.getElementById('feedback-message' );
const editScreen = document.getElementById('edit-screen' );
const editCarsBtn = document.getElementById('edit-cars-btn' );
const carListContainer = document.getElementById('car-list-container' );
const addNewCarBtn = document.getElementById('add-new-car-btn' );
const backToMenuBtn = document.getElementById('back-to-menu-btn' );
const editPartsBtn = document.getElementById('edit-parts-btn' );
const editPartsScreen = document.getElementById('edit-parts-screen' );
const partListContainer = document.getElementById('part-list-container' );
const addNewPartBtn = document.getElementById('add-new-part-btn' );
const backToMenuFromPartsBtn = document.getElementById('back-to-menu-from-parts-btn' );
const editModal = document.getElementById('edit-modal' );
const editForm = document.getElementById('edit-form' );
const cancelEditBtn = document.getElementById('cancel-edit-btn' );
const brandNameInput = document.getElementById('brand-name-input' );
const logoUrlInput = document.getElementById('logo-url-input' );
const modelsInput = document.getElementById('models-input' );
const modalError = document.getElementById('modal-error' );
const editPartModal = document.getElementById('edit-part-modal' );
const editPartForm = document.getElementById('edit-part-form' );
const cancelPartEditBtn = document.getElementById('cancel-part-edit-btn' );
const partNameInput = document.getElementById('part-name-input' );
const partImageUrlInput = document.getElementById('part-image-url-input' );
const partModalError = document.getElementById('part-modal-error' );
// --- CAR DATA ---
// This is now the default data if nothing is in localStorage.
const defaultCarData = {
logoQuiz: [
{ name: 'Toyota', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Toyota_EU.svg/200px-Toyota_EU.svg.png ' },
{ name: 'Honda', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Honda.svg/200px-Honda.svg.png ' },
{ name: 'Ford', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Ford_logo_flat.svg/200px-Ford_logo_flat.svg.png ' },
{ name: 'BMW', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/200px-BMW.svg.png ' },
{ name: 'Mercedes-Benz', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Mercedes-Benz_Logo_2010.svg/200px-Mercedes-Benz_Logo_2010.svg.png ' },
{ name: 'Audi', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Audi-Logo_2016.svg/200px-Audi-Logo_2016.svg.png ' },
{ name: 'Volkswagen', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Volkswagen_logo_2019.svg/200px-Volkswagen_logo_2019.svg.png ' },
{ name: 'Chevrolet', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Chevrolet_logo.svg/200px-Chevrolet_logo.svg.png ' },
{ name: 'Subaru', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Subaru_logo.svg/200px-Subaru_logo.svg.png ' },
{ name: 'Nissan', logoURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Nissan_logo.svg/200px-Nissan_logo.svg.png ' }
],
modelQuiz: [
{ make: 'Toyota', models: ['Camry', 'Corolla', 'RAV4', 'Highlander', 'Prius'] },
{ make: 'Ford', models: ['Mustang', 'F-150', 'Explorer', 'Escape', 'Focus'] },
{ make: 'Honda', models: ['Civic', 'Accord', 'CR-V', 'Pilot', 'Odyssey'] },
{ make: 'Chevrolet', models: ['Silverado', 'Equinox', 'Malibu', 'Camaro', 'Tahoe'] },
{ make: 'Tesla', models: ['Model 3', 'Model S', 'Model X', 'Model Y', 'Cybertruck'] },
{ make: 'BMW', models: ['3 Series', '5 Series', 'X3', 'X5', 'M3'] },
{ make: 'Mercedes-Benz', models: ['C-Class', 'E-Class', 'S-Class', 'GLC', 'GLE'] },
{ make: 'Audi', models: ['A4', 'A6', 'Q5', 'Q7', 'R8'] },
{ make: 'Volkswagen', models: ['Jetta', 'Passat', 'Tiguan', 'Golf', 'Atlas'] },
{ make: 'Subaru', models: ['Outback', 'Forester', 'Crosstrek', 'Impreza', 'WRX'] },
{ make: 'Nissan', models: ['Altima', 'Sentra', 'Rogue', 'Titan', 'Leaf'] }
],
partQuiz: [
| Reply | Forward |
.jpg) | ReplyForward |